<template>
  <div>

    <span>
      <el-button type="primary" @click="addMark()">添加标记点</el-button>
      <el-button type="primary" @click="getLength()">测距</el-button>
      <el-button type="primary" @click="getArea()">测范围</el-button>
    </span>
      <div id="container" 
      :style="{width:width+'px',height:height+'px',margin:'34px auto'}" 
      />

      <!-- 测量工具选择 -->
      

    <!-- 点标记信息编辑弹窗 -->
    <el-dialog v-model="dialogAddMark" title="操作标记点" width="20%">
      <el-form
      ref="AddData"
      :model="AddData"
      class="demo-ruleForm"
      >
        <el-form-item label="横坐标">
          <el-input v-model="AddData.pointX" type="text" readonly></el-input>
        </el-form-item>
        <el-form-item label="纵坐标">
          <el-input v-model="AddData.pointY" type="text" readonly></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="AddData.message" type="textarea" autosize></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import AMap from 'AMap' //引入高德地图AMap
import axios from '../../utils/request'
import { ElMessage } from 'element-plus'
export default {
  name: 'GMap',
  props: {
    width: {
      type: Number,
      default: 1400
    },
    height: {
      type: Number,
      default: 800
    }
  }, //添加变量，方便组件复用
  inject: ['reload'], 
  data(){
    return {
      MarkPointList:[],   //标记点数组
      //点击经纬度
      isAddMark:false,
      dialogAddMark:false,
      AddData:{
        pointX:'',
        pointY:'',
        message:''
      },
      // 测量类型
      isStartMatureLine:false,
      isStartMatuerArea:false
    }
  },
 methods: {
//初始化地图
   initMap () {
      let self = this
      let map = new AMap.Map('container', {
        center: [116.397428, 39.90923],
        resizeEnable: true,
        zoom: 10
      })
      
      var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});

      // 测距组件
      map.plugin(["AMap.MouseTool"],function(){ 
        self.tools = new AMap.MouseTool(map);
      });
      
      //创建标记点
      for(let i=0;i<this.MarkPointList.length;i++){
        var marker = new AMap.Marker({
          position: [this.MarkPointList[i].pointX,this.MarkPointList[i].pointY],//不同标记点的经纬度
          map: map
        });

        //内部样式
        marker.content = `
        <div>`+this.MarkPointList[i].message+
          `<div>
            <button onclick="EditMessage(`+this.MarkPointList[i].id+`)">编辑</button>
            <button onclick="delMarker(`+this.MarkPointList[i].id+`)">删除</button>
          </div>`+
        `</div>`;

        marker.on('click', markerClick);
      }

      function markerClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
      }

      // 在上面绑定的sendMessage方法
      window.EditMessage = (num) => {this.updateMark(num);}
      window.delMarker = (num) =>{this.deleteMark(num);}

      map.setFitView();   //地图自适应
      self.map = map
    },

    //添加标记点
    addMark(){
      var self = this;
      self.isAddMark = !self.isAddMark;
      //地图控件添加点击事件或解绑点击事件
      if(this.isAddMark){
        this.map.on('click', this.showInfoClick);
      }else{
        this.map.off('click', this.showInfoClick);
      }
    },
    
    // 删除标记点
    deleteMark(id){
      axios.get('/MarkPoints/delete',{params:{id:id}})
      .then(res=>{
        console.log(res);
        this.reload()
      })
    },
    //修改标记点
    updateMark(id){
      axios({
        method:'get',
        url:'/MarkPoints/detail',
        params:{
          id:id
        }
      })
      .then(res=>{
        console.log(res);
        this.AddData = res.data.data.markPoint;
        this.dialogAddMark = true;
      })
    },
    // 添加标记点
    showInfoClick(e){
      //添加标记点  ——  弹窗
      this.AddData.pointX = e.lnglat.getLng();
      this.AddData.pointY = e.lnglat.getLat();
      this.AddData.message = '';
      this.dialogAddMark = true;
    },
    //标记点提交函数
    submitForm(){
      var axiosType = 'add';
      if(!this.isAddMark){
        axiosType = 'upData';
      }
      axios.post("/MarkPoints/"+axiosType,this.AddData)
            .then(res=>{
              if(res.data.status=== 200){
                ElMessage({
                  message: res.data.message,
                  type: 'success',
                });
              }
              this.reload()
            })
    },

    getLength(){
      //加载距离测量插件
      var self = this;
      self.isStartMatureLine = !self.isStartMatureLine;
      self.isStartMatuerArea = false;
      self.dialogAddMark = false;
      self.isAddMark = false;
      self.map.off('click', this.showInfoClick);
      if(self.isStartMatureLine){
        self.tools.rule();
      }else{
        self.tools.close();
      }
    },

    getArea(){
      var self = this;
      self.isAddMark = false;
      self.dialogAddMark = false;
      self.isStartMatureLine = false;
      self.isStartMatuerArea = !self.isStartMatuerArea;
      self.map.off('click', this.showInfoClick);
      if(self.isStartMatuerArea){
        self.tools.measureArea();
      }else{
        self.tools.close();
      }
    }
  },
//在mounted阶段调用（mounted可以操作DOM）
 mounted () {
   //获取标记点
    axios.get('/MarkPoints/MarkPoint').then(reponse=>{
        console.log(reponse.data);
        this.MarkPointList =  reponse.data.data.markPoint;   
      });

    setTimeout(this.initMap, 500)
    // console.log(this.ruler)
  }
}
</script>
